﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ResourceTecnology.ascx.cs"
    Inherits="Demo.Web.Catalogs.ResourceTecnology1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script type="text/javascript">
    var getDragDropText = function () {
        var buf = [];

        buf.push("<ul>");

        Ext.each(this.view.panel.getSelectionModel().getSelection(), function (record) {
            buf.push("<li>" + record.data.Description + "</li>");
        });

        buf.push("</ul>");

        return buf.join("");
    };
    </script>
<ext:Window ID="TecnologyWindow" runat="server" Icon="Group" Title="Employee Details"
    Width="400" Height="300" AutoShow="false" Modal="true" Hidden="true" Layout="Fit"
    ConstrainHeader="false" Constrain="false">
    <Items>
       <ext:Panel ID="Panel1" runat="server" Width="350" Height="250">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Stretch" Padding="5" />
            </LayoutConfig>
            <Items>
                <ext:GridPanel
                    ID="gpUnAssigned" 
                    runat="server" 
                    MultiSelect="true"
                    Flex="1"
                    Title="Sin Asignar"
                    Margins="0 2 0 0">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Id" />
                                        <ext:ModelField Name="Description" />                                        
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel>
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="Tecnologia"  DataIndex="Description" Flex="1" />
                            <ext:Column ID="Column2" runat="server" Text="Column 1" DataIndex="Id" Visible="false" />                            
                        </Columns>
                    </ColumnModel>                    
                    <View>
                        <ext:GridView ID="GridView1" runat="server">
                            <Plugins>
                                <ext:GridDragDrop ID="GridDragDrop1" runat="server" DragGroup="firstGridDDGroup" DropGroup="secondGridDDGroup"/>
                            </Plugins>
                            <Listeners>
                                <AfterRender Handler="this.plugins[0].dragZone.getDragText = getDragDropText;" />
                                <Drop Handler="var dropOn = overModel ? ' ' + dropPosition + ' ' + overModel.get('Description') : ' on empty view';" />
                            </Listeners>
                        </ext:GridView>
                    </View>   
                </ext:GridPanel>
                <ext:GridPanel 
                    ID="gpAssigned" 
                    runat="server"
                    MultiSelect="true"
                    Title="Asignadas"
                    Flex="1"
                    Margins="0 0 0 3">
                    <Store>
                        <ext:Store ID="Store2" runat="server">
                            <Model>
                                <ext:Model ID="Model2" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Id" />
                                        <ext:ModelField Name="Description" />   
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel>
                        <Columns>
                            <ext:Column ID="Column3" runat="server" Text="Tecnologia"  DataIndex="Description" Flex="1" />
                            <ext:Column ID="Column4" runat="server" Text="Column 1" DataIndex="Id" Visible="false" />   
                        </Columns>
                    </ColumnModel>                   
                    <View>
                        <ext:GridView ID="GridView2" runat="server">
                            <Plugins>
                                <ext:GridDragDrop ID="GridDragDrop2" runat="server" DragGroup="secondGridDDGroup" DropGroup="firstGridDDGroup"/>
                            </Plugins>
                            <Listeners>
                                <AfterRender Handler="this.plugins[0].dragZone.getDragText = getDragDropText;" />
                                <Drop Handler="var dropOn = overModel ? ' ' + dropPosition + ' ' + overModel.get('Description') : ' on empty view';" />
                            </Listeners>
                        </ext:GridView>
                    </View>   
                </ext:GridPanel>
            </Items> 
            <Buttons>                
                <ext:Button ID="Button2" runat="server" Text="Asignar" Icon="Add">
                    <DirectEvents>
                        <Click OnEvent="Asignar">
                            <ExtraParams>
                            <ext:Parameter 
                                Name="Assigned" 
                                Value="Ext.encode(#{gpAssigned}.getRowsValues())" 
                                Mode="Raw"                                        
                                />                                    
                            <ext:Parameter 
                                Name="UnAssigned" 
                                Value="Ext.encode(#{gpUnAssigned}.getRowsValues())" 
                                Mode="Raw"                                        
                                />
                            </ExtraParams>
                            <EventMask ShowMask="true"/>      
                        </Click>
                    </DirectEvents>
                </ext:Button>                    
                <ext:Button ID="Button1" runat="server" Text="Restablecer Datos" Icon="Decline">
                    <Listeners>
                        <Click Handler="#{Store1}.loadData(#{Store1}.proxy.data); #{Store2}.loadData(#{Store2}.proxy.data);" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel> 
    </Items>
</ext:Window>
